﻿<!DOCTYPE html  >
<!--[if IE 7]>
<html class="ie ie7"><![endif]-->
<!--[if IE 8]>
<html class="ie ie8"><![endif]-->
<!--[if IE 9]>
<html class="ie ie9"><![endif]-->
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml" lang="ch">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="author" content="Nghia Minh Luong">
    <meta name="keywords" content="Default Description">
    <meta name="description" content="Default keyword">
    <title>商品详情</title>
    <!-- Fonts-->
    <link rel="stylesheet" th:href="@{/static/css/fontsgoogleapis.css}">
    <link rel="stylesheet" th:href="@{/static/plugins/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/static/plugins/ps-icon/style.css}">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/static/plugins/bootstrap/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/plugins/owl-carousel/assets/owl.carousel.css}">
    <link rel="stylesheet" th:href="@{/static/plugins/jquery-bar-rating/dist/themes/fontawesome-stars.css}">
    <link rel="stylesheet" th:href="@{/static/plugins/slick/slick/slick.css}">
    <link rel="stylesheet" th:href="@{/static/plugins/bootstrap-select/dist/css/bootstrap-select.min.css}">
    <link rel="stylesheet" th:href="@{/static/plugins/Magnific-Popup/dist/magnific-popup.css}">
    <link rel="stylesheet" th:href="@{/static/plugins/jquery-ui/jquery-ui.min.css}">
    <link rel="stylesheet" th:href="@{/static/plugins/revolution/css/settings.css}">
    <link rel="stylesheet" th:href="@{/static/plugins/revolution/css/layers.css}">
    <link rel="stylesheet" th:href="@{/static/plugins/revolution/css/navigation.css}">
    <link rel="stylesheet" th:href="@{/static/css/style.css}">
    <link rel="stylesheet" th:href="@{/static/css/userInfo/style.css}">
    <link rel="stylesheet" th:href="@{/static/css/gooddetail.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/static/font-awesome/css/font-awesome.css}"/>
    <script type="text/javascript" th:src="@{/static/plugins/jquery/dist/jquery.min.js}"></script>
    <script th:src="@{/static/js/html5shiv.js}"></script>
    <script th:src="@{/static/js/respond.min.js}"></script>
    <script th:src="@{/static/js/vue.js}"></script>
    <script th:inline="javascript">
        let basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
        let userid = [[${session.userid}]];
    </script>

</head>
<!--[if IE 7]>
<body class="ie7 lt-ie8 lt-ie9 lt-ie10"><![endif]-->
<!--[if IE 8]>
<body class="ie8 lt-ie9 lt-ie10"><![endif]-->
<!--[if IE 9]>
<body class="ie9 lt-ie10"><![endif]-->
<body class="ps-loading">
<div class="header--sidebar"></div>
<header class="header">
    <div th:include="~{index :: myheader}"></div>
</header>
<div class="header-services">
    <div th:include="~{index :: myhdservices}"></div>
</div>
<div class="checkout-area">
    <div class="container">
        <div class="row">
            <form name="pay" method="post">
                <!-- coupon-area start -->
                <div class="coupon-area">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="coupon-accordion">
                                    <!-- ACCORDION START -->
                                    <h3>拥有优惠卷？<span id="showcoupon">点此输入优惠卷代码</span></h3>
                                    <div id="checkout_coupon" class="coupon-checkout-content">
                                        <div class="coupon-info">
                                            <p class="checkout-coupon">
                                                <input type="text" placeholder="输入您的优惠卷代码" name="code"/>
                                            </p>
                                        </div>
                                    </div>
                                    <!-- ACCORDION END -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- coupon-area end -->
                <div class="col-lg-6 col-md-6">
                    <div class="checkbox-form">
                        <br/><br/>
                        <h3>结算明细</h3>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="checkout-form-list">
                                    <label>收件人姓名（必填）<span class="required">*</span></label>
                                    <input id="name" type="text" placeholder="收件人姓名" name="name"/>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="checkout-form-list">
                                    <label>收货地址（必填）<span class="required">*</span></label>
                                    <input id="address" type="text" placeholder="收货地址" name="address"/>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="checkout-form-list">
                                    <label>收件人手机号码（必填）<span class="required">*</span></label>
                                    <input id="phone" type="number" placeholder="手机号码" name="phone"/>
                                </div>
                            </div>
                        </div>
                        <div class="different-address">
                            <div class="order-notes">
                                <div class="checkout-form-list">
                                    <label>订购补充（选填）</label>
                                    <textarea id="checkout-mess" cols="30" rows="10" placeholder="有关订单的注释，例如：交货的特殊注释。"
                                              name="notes"></textarea>
                                </div>
                            </div>
                        </div>
                        <input id="nums" name="nums" hidden>
                        <input id="users" name="users" hidden>
                        <input id="carts" name="carts" hidden>
                        <input id="goods" name="goods" hidden>
                        <input id="prices" name="prices" hidden>
                        <input id="merchants" name="merchants" hidden>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="your-order">
                        <h3>您的订单</h3>
                        <div class="your-order-table table-responsive">
                            <table>
                                <tbody>
                                <input type="text" id="goodSize" th:value="${goodsMap.size()}" hidden>
                                <tr th:each="goods,sta : ${goodsMap.keySet()}" class="cart_item">
                                    <td  class="product-name" th:value="${goods.getCommname()}" style="text-align: left">
                                        [[${goods.getCommname()}]]
                                        <input type="text" th:id="product-name+${sta.index}" th:value="${goods.getCommname()}" hidden>
                                    </td>
                                    <td style="text-align: left">
                                        <strong class="product-quantity">
                                            × [[${goodsMap.get(goods)}]]
                                            <input type="text" th:id="num+${sta.index}" th:value="${goodsMap.get(goods)}" hidden>
                                            <input type="text" th:id="commid+${sta.index}" th:value="${goods.getCommid()}" hidden>
                                            <input type="text" id="order_id" th:value="${goods.getCommid()}" hidden>
                                        </strong>
                                    </td>
                                    <td class="product-total" style="text-align: right">
                                        <span class="amount" th:value="${goods.getThinkmoney()}*${goodsMap.get(goods)}">￥[[${goods.getThinkmoney()}*${goodsMap.get(goods)}]]</span>
                                    </td>
                                </tr>
                                </tbody>
                                <tfoot>
                                <tr class="shipping">
                                    <th style="text-align: left">快递运输费</th>
                                    <td></td>
                                    <td style="text-align: right">
                                        <ul>
                                            <li>
                                                <input type="radio" checked="checked"/>
                                                <label>免运费</label>
                                            </li>
                                            <li></li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr class="order-total">
                                    <th style="text-align: left">
                                        <label>订单总金额</label>
                                    </th>
                                    <td></td>
                                    <td style="text-align: right"><strong><span class="amount" th:value="${totalPrice}">
												￥[[${totalPrice}]]
												<input th:value="${totalPrice}" id="price" hidden>
											</span></strong>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                        <div class="payment-method">
                            <input hidden type="number" value="" name="way" id="way">
                            <div class="order-button-payment">
                                <input type="submit" onclick="
                                var address = document.getElementById('address');
                                var name = document.getElementById('name');
                                var phone = document.getElementById('phone');

                                if (address.value=='' || name.value=='' || phone.value=='') {
                                alert('必填信息不能为为空！');return false;
                                }else{wei();}" value="取消订单" style="background: lightgreen"/>
                            </div>
                            <div class="order-button-payment">
                                <input type="button" onclick="
                                var address = document.getElementById('address');
                                var name = document.getElementById('name');
                                var phone = document.getElementById('phone');

                                if (address.value=='' || name.value=='' || phone.value=='') {
                                alert('必填信息不能为为空！');return false;
                                }else{ali();return false;}" value="提交订单"
                                       style="background: deepskyblue"/>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<main class="ps-main">


</main>
<!-- JS Library-->
<script>
    function wei() {
        var way = document.getElementById("way");
        way.value = 0;
        document.pay.action = "pay/wx";
        document.pay.submit();
    }


</script>
<script type="text/javascript" th:src="@{/static/plugins/bootstrap/dist/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/jquery-bar-rating/dist/jquery.barrating.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/owl-carousel/owl.carousel.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/gmap3.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/imagesloaded.pkgd.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/isotope.pkgd.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/bootstrap-select/dist/js/bootstrap-select.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/jquery.matchHeight-min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/slick/slick/slick.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/elevatezoom/jquery.elevatezoom.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/Magnific-Popup/dist/jquery.magnific-popup.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/jquery-ui/jquery-ui.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/ditugoogle.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/revolution/js/jquery.themepunch.tools.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/revolution/js/jquery.themepunch.revolution.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.video.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.slideanims.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.layeranimation.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.navigation.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.parallax.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.actions.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.kenburn.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/revolution/js/extensions/revolution.extension.migration.min.js}"></script>
<!-- Custom scripts-->
<script type="text/javascript" th:src="@{/static/js/main.js}"></script>
<script type="text/javascript" th:src="@{/static/js/timeago.js}"></script>
<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/static/js/common/productdetail.js}"></script>
</body>
</html>
